body,html{
	margin:0px;
	padding:0px;
}

a{
  text-decoration:none; 
  color:#000;
}

.HolyGrail {
	position:absolute;
	display: flex;
	width:100%;
	height: 100%;
	flex-direction: column;
  background: -webkit-linear-gradient(#fff, #d5d5d5);
  background: -o-linear-gradient(#fff, #d5d5d5); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(#fff, #d5d5d5); /* Firefox 3.6 - 15 */
  background: linear-gradient(#fff, #d5d5d5);
}

header,footer {
    flex: 0 0 6%;
    width:100%;
    font-style:1.2rem;
    z-index:5;
}
.HolyGrail-bg {
  display: flex;
  height:20px;
  background: -webkit-linear-gradient(#fff, #d5d5d5);
  background: -o-linear-gradient(#fff, #d5d5d5); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(#fff, #d5d5d5); /* Firefox 3.6 - 15 */
  background: linear-gradient(#fff, #d5d5d5);
  border-bottom:0.1em solid rgba(255,150,98,0.5);
}
.HolyGrail-body {
   display: flex;
   flex: 1;
}

.HolyGrail-content {
  flex: 1;
  position:relative;
}

.HolyGrail-nav, .HolyGrail-ads {
  /* 两个边栏的宽度设为12em */
  background: -webkit-linear-gradient(#fff, #d5d5d5);
  background: -o-linear-gradient(#fff, #d5d5d5); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(#fff, #d5d5d5); /* Firefox 3.6 - 15 */
  background: linear-gradient(#fff, #d5d5d5);
  border-right:0.01em solid #fbfbfb;
  flex: 0 0 16em;
}

.HolyGrail-nav {
  /* 导航放到最左边 */
  order: -1;
}

.title{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-indent: 2em;
    width:100%;
    height:100%;
    background:#e34b09;
}

.nav-title{
    width:94%;
    height:40px;
    background: -webkit-linear-gradient(#fff, #d5d5d5);
    background: -o-linear-gradient(#fff, #d5d5d5); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(#fff, #d5d5d5); /* Firefox 3.6 - 15 */
    background: linear-gradient(#fff, #d5d5d5);
}
.nav-title p{
  width:100%;
  height:36px;
  line-height:36px;
  text-align:center;
  border-top:1px solid #ddd;
  border-bottom:0.4em solid #e16c3b;
}
.listBox{
  display:flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
}

.buttonList{
   width:70%;
   height:40px;
   line-height:40px;
   font-size:1.05rem;
   margin:20px auto;
   background: -webkit-linear-gradient(#e17a65,#e34b09);
   background: -o-linear-gradient(#e17a65,#e34b09); /* Opera 11.1 - 12.0 */
   background: -moz-linear-gradient(#e17a65,#e34b09); /* Firefox 3.6 - 15 */
   background: linear-gradient(#e17a65,#e34b09);
   -moz-box-shadow:-1px 0px 10px #C7C7C7; 
   -webkit-box-shadow:-1px 0px 10px #C7C7C7; 
   box-shadow:-1px 0px 10px #C7C7C7;
   border-radius:6px;
   -moz-border-radius:6px;
   -webkit-border-radius:6px;
   text-align:center;
}
.buttonList a{
  color:#000;
  text-decoration:none;
}
.contentBox>div.nav-title,.content_box>div.nav-title{
   width:100%;
}
.contentBox>div.nav-title>p,.content_box>div.nav-title>p{
    width:100%;
}
.contentBox{
  width:97%;
  height:100%;
  background:#010101 url(../../image/soundWave.png) 50% 50%;
  background-size:80% auto;
  z-index:3;
}
.content_box{
   width:97%;
   height:100%;   
   z-index:3;
}
.welcome{
    display: flex;
    justify-content: center;
    align-items: center; 
    width:100%;
    height:100%;
}
.welcome span{
   color:#fff;
   font-size:8rem;
   display:block;
   -webkit-text-stroke:0.1rem blue
}
.clip{
   width:100%;
   height:100%;
}

.clipTip{
  width:100%;
  height:104px;
}
.clipTip>div.clipOne{
  width:100%;
  height:50px;
}
.clipTip>div.clipOne>span{
   width:30%;
   height:50px;
   display:block;
   float:left;
   line-height:50px;
   text-indent:1rem;
}
.clipTip>div.clipOne>button{
   width:200px;
   height:34px;
   display:block;
   float:left;
   border:none;   
    background: -webkit-linear-gradient(#fff, #d5d5d5);
    background: -o-linear-gradient(#fff, #d5d5d5); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(#fff, #d5d5d5); /* Firefox 3.6 - 15 */
    background: linear-gradient(#fff, #d5d5d5);
   border-radius:6px;
   -moz-border-radius:6px;
   -webkit-border-radius:6px;
   margin:10px 5%;
   border:1px solid #888;
}
.openFile{
  float:left;
  width:200px;
  height:34px;
  margin:10px 5%;
  font-size:1rem;
}
.openFile>label {
    position: relative;
    display: inline-block;
    background: -webkit-linear-gradient(#fff, #d5d5d5);
    background: -o-linear-gradient(#fff, #d5d5d5); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(#fff, #d5d5d5); /* Firefox 3.6 - 15 */
    background: linear-gradient(#fff, #d5d5d5);
    border-radius: 4px;
    height:34px;
    overflow: hidden;
    color: #1E88C7;
    width:200px;
    text-decoration: none;
    text-indent: 0;
    line-height: 34px;
    cursor: pointer;
    color:#000;
    text-align:center; 
    font-size:13.3333px;  border:1px solid #888;
}
/*隐藏默认样式*/
.openFile>input[id=file] {
    margin-left: -2000000px;
    height: 0;
}

.tableBox{
  width:96%;
  height:56%;
  position:absolute;
  border:1px solid #efefef;
  margin:4px auto;
}
.tableBox table,.vicoeLeft div.vicoeTable  table{
  width:100%;
   border-collapse:collapse;
}
.tableBox table thead tr,.tableBox table tbody tr,.vicoeLeft div.vicoeTable  table tbody tr{
   width:100%;
   height:40px;
   line-height:40px;
   color:#888;
   border: 1px solid #f5f6f8; 
   text-align:center;
}
.tableBox table thead tr th:nth-child(1),.tableBox table tbody tr th:nth-child(1){
    width:30%;
}
.tableBox table thead tr th:nth-child(2),.tableBox table tbody tr th:nth-child(2){
    width:20%;
}
.tableBox table thead tr th:nth-child(3),.tableBox table tbody tr th:nth-child(3){
    width:14%;
}
.tableBox table thead tr th:nth-child(4),.tableBox table tbody tr th:nth-child(4){
    width:10%;
}
.tableBox table thead tr th:nth-child(5),.tableBox table tbody tr th:nth-child(5){
    width:14%;
}
.tableBox table thead tr th:nth-child(6),.tableBox table tbody tr th:nth-child(6){
    width:12%;
}

.openClip{
   float:left;
   width:60%;
   height:100%;
   position:absolute;
}

.openClipTip{
   width:90%;
   height:60%;
   background:#fff;
   margin:4% auto;
   border:1px solid #b5b5b5;
   border-radius:6px;
   -moz-border-radius:6px;
   -webkit-border-radius:6px;
}
.openClipTip>div.imgBox{
    width:94%;
    height:70%;
    margin:2% auto;
   border-radius:6px;
   -moz-border-radius:6px;
   -webkit-border-radius:6px;
}
.openClipTip>div.imgBox img{
   width:100%;
   max-height:100%;
   border-radius:6px;
   -moz-border-radius:6px;
   -webkit-border-radius:6px;
}
.openClipTip>div.progress{
   width:64%;
   height:6%;
   margin-left:3%;
}
.openClipTip>div.progress>input{
    width:100%;
}
.openClipTip>div.progressBar{
   width:94%;  
   height:12%;
   margin:0px auto;
}
.openClipTip>div.progressBar>div.progressTime{
    width:70%;
    height:100%; 
    float:left;
}
.openClipTip>div.progressBar>div.progressTime span{
    display:block;
    width:50%;
    float:left;
    padding:1rem 0rem;
}
.openClipTip>div.progressBar>div.progressTime span:first-child{
   text-align:left;
}
.openClipTip>div.progressBar>div.progressTime span:last-child{
   text-align:right;
}
.openClipTip>div.progressBar>div.progressSeeting{
    width:30%;
    height:100%; 
    float:left; 
}
.openClipTip>div.progressBar>div.progressSeeting a{
    width:33.3%;
    float:left;
    display: inline-block;
    height:100%;
}
.openClipTip>div.progressBar>div.progressSeeting a:nth-child(1){
    background:#fff url(../../image/timeOut.png) 50% 50% no-repeat;
    background-size:80% auto;
}
.openClipTip>div.progressBar>div.progressSeeting a:nth-child(2){
    background:#fff url(../../image/timeOut.png) 50% 50% no-repeat;
    background-size:80% auto;
}
.openClipTip>div.progressBar>div.progressSeeting a:nth-child(3){
    background:#fff url(../../image/Mute.png) 50% 50% no-repeat;
    background-size:50% auto;
}
.openClipBottom{
   width:90%;
   height:20%; 
   margin:0px auto;
   border:1px solid #b5b5b5;
   border-radius:6px;
   -moz-border-radius:6px;
   -webkit-border-radius:6px;
}
.openClipBottom>p.openClipTitle{
   width:100%;
   height:10%;
   text-indent:2rem;
}
.openClipBottom>div{
   width:50%;
   float:left;
   height:60%;
}
.openClipBottom>div span{
   width:200px;
   height:24px;
   line-height:24px;
   display:block;
   margin:4px auto;
    background: -webkit-linear-gradient(#fff, #d5d5d5);
    background: -o-linear-gradient(#fff, #d5d5d5); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(#fff, #d5d5d5); /* Firefox 3.6 - 15 */
    background: linear-gradient(#fff, #d5d5d5);
   border:1px solid #b5b5b5;
   text-align:center;
}
.openClipBottom>div>p>input{
   width:100px;
   height:20px;
   display:block;
   margin:0px auto;
}
.openClipSure{
    width:30%;
    float:right;
    margin-left:60%;
    height:100%;
    position:absolute;
    display:flex;
    align-items: center;
}
.openClipSure a{
    width:120px;
    height:34px;
    line-height:34px;
    text-align:center;
    border:1px solid #888;
    background: -webkit-linear-gradient(#fff, #d5d5d5);
    background: -o-linear-gradient(#fff, #d5d5d5); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(#fff, #d5d5d5); /* Firefox 3.6 - 15 */
    background: linear-gradient(#fff, #d5d5d5);
   border-radius:6px;
   -moz-border-radius:6px;
   -webkit-border-radius:6px;
   color:#000;
}

.openClip_Sure{
    width:30%;
    float:right;
    margin-left:60%;
    height:100%;
    position:absolute
}
.openClip-sure{
    width:200px;
    text-align:center;
    border:1px solid #888;
    background: -webkit-linear-gradient(#fff, #d5d5d5);
    background: -o-linear-gradient(#fff, #d5d5d5); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(#fff, #d5d5d5); /* Firefox 3.6 - 15 */
    background: linear-gradient(#fff, #d5d5d5);
    border-radius:6px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    color:#000;
    margin:20px auto 0px auto;
}
.openClip-sure a{
    width:100%;
    height:34px;
    line-height:34px;
    display:block;
    text-align:center;
}
.cutting{
    width: 100%;
    height:45px;
    margin:0px;
    padding:0px;
}
.cutting>p.cutTiper{
    width:100%;
    height:20px;
    text-align:right;
    line-height:20px;
    color:#888;
    font-size:0.9rem;
    letter-spacing:1rem;
}
.cutting>p.cutDesc{
    width:100%;
    height:20px;
    line-height:20px;
    margin:0px;
    padding:0px;
  }
.cutting>p.cutDesc span{
   width:48%;
   float:left;
   height:22px;
   line-height:22px;
   display:block;
}
.cutting>p.cutDesc input{
   width:50%;
   float:right;
   margin-right:0px;
   height:12px;
   line-height:12px;
   display:block;
}
.channel{
   width:98%;
   height:120px;
   border:1px solid #b5b5b5;
   margin:30px auto 0px auto;
   border-radius:6px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
}
.channel span{
    width:100%;
    height:30px;
    display: block;
    line-height:30px;
    color:#888;
    text-indent:1rem;
    font-size:0.8rem;
}
.channel>div.channelBox{
   width:90%;
   height:70px;
   margin:5px auto;
   border:1px solid #888;
}

.channel>div.channelBox>textarea{
   width:100%;
   height:100%; 
   resize:none
}

.channel-box{
   width:90%;
   height:70px;
   margin:5px auto;
}
.channel-box>span.channelImg{
    display:block;
    width:30%;
    height:100%;
    float:left;
    background:#fff url(../../image/sound.png) 50% 50% no-repeat;
    background-size:60% auto;
}
.channel-box>div.channelRight{
   float:right;
   width:70%;
   height:100%;
}
.channel-box>div.channelRight span{
   width:100%;
   height:23px;
   line-height:23px;
}
.vicoeBox{
  background:#ece9d8;
}
.vicoe_Box{
   width:100%;
   height:100%;
}
.vicoeLeft{
    width:54%;
    height:70%;
    float:left;
    background:#fff;
    border:1px solid #b5b5b5;
    margin:5% 4%;
}
.vicoeRight{
    width:20%;
    height:200px;
    float:left;
    background:#fff;
    border:1px solid #b5b5b5;
    margin-top:7%;
}
.vicoeLeft>p.vicoeTitle,.vicoeRight>p.vicoeTitle{
    width:100%;
    height:30px;
    line-height:30px;
    text-indent:1rem;
}
.vicoeLeft div.vicoeTable{
    width:100%;
    height:80%;
    margin:0px auto;
}

.vicoeRightBox{
    width:90%;
    height:120px;
    margin:0px auto;
}

.vicoeRightBox ul{
   width:100%;
   height:100%;
   margin:0px;
   padding:0px;
   float: left;
}
.vicoeRightBox ul li{
    width:50%;
    height:60px;
    margin:0px;
    padding:0px;
    list-style:none;
    float:left;
    font-size:0.9rem;
    text-align: center;
    line-height:60px;
}